<template>
  <q-input
    v-model="formatTimeInput"
    filled
    mask="####/##/## - ####/##/##"
    :label="field.label"
  >
    <template v-slot:append>
      <q-icon v-if="formatTimeInput && (field.clearable === undefined || field.clearable === true)" name="close" @click="formatTimeInput = ''" class="cursor-pointer" />
      <q-icon
        name="event"
        class="cursor-pointer"
      >
        <q-popup-proxy
          ref="qDateProxy"
          transition-show="scale"
          transition-hide="scale"
          v-model="proxyShown"
          @before-show="initCalendar"
        >
          <q-date
            v-model="dateRange"
            :subtitle="field.label"
            :default-year-month="defaultYearMonth"
            range
          />
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</template>
<script>
import { defineComponent } from 'vue';
import { date } from 'quasar';
import moment from 'moment';

export default defineComponent({
  name: 'dateInput',
  props: {
    field: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      proxyShown: false,
      begin: '',
      end: '',
      dateRange: null,
      defaultYearMonth: null
    }
  },
  mounted () {
    this.init();
  },
  methods: {
    init () {
      if (this.field.days > 0) {
        const begin = moment().subtract(this.field.days, 'day').startOf('day').format('X'); // 当天0点时间戳 // parseInt((Date.now() - this.field.days * 86400000) / 1000);
        const end = moment().endOf('day').format('X'); // 当天23:59:59时间戳 // parseInt(Date.now() / 1000);
        this.field.value = `${begin}|${end}`;
      } else {
        this.field.value = '';
      }
    },
    initCalendar () {
      this.dateRange = null;
      if (this.field.value && this.field.value.indexOf('|')) {
        const daterange = this.field.value.split('|');
        this.defaultYearMonth = date.formatDate(daterange[0] * 1000, 'YYYY/MM');
      } else {
        this.defaultYearMonth = date.formatDate(Date.now(), 'YYYY/MM');
      }
    }
  },
  watch: {
    dateRange (val) {
      if (val) {
        if (typeof val === 'string') {
          this.begin = parseInt((new Date(val)).valueOf() / 1000);
          this.end = this.begin + 86400 - 1;
        } else {
          this.begin = parseInt((new Date(val.from)).valueOf() / 1000);
          this.end = parseInt((new Date(val.to)).valueOf() / 1000) + 86400 - 1;
        }
        this.field.value = `${this.begin}|${this.end}`;
        // this.dateRange = null;
        this.$refs.qDateProxy.hide();
      }
    },
    'field.days' () {
      this.init();
    }
  },
  computed: {
    formatTimeInput: {
      get () {
        if (this.field.value && this.field.value.indexOf('|')) {
          const daterange = this.field.value.split('|');
          return date.formatDate(daterange[0] * 1000, 'YYYY/MM/DD') + ' - ' + date.formatDate(daterange[1] * 1000, 'YYYY/MM/DD');
        } else {
          return '';
        }
      },
      set (val) {
        if (val) {
          const daterange = val.split(' - ');
          if (daterange.length === 2 && date.isValid(daterange[0]) && date.isValid(daterange[1]) && daterange[0].split('/').length === 3 && daterange[1].split('/').length === 3) {
            this.begin = parseInt((new Date(daterange[0])).valueOf() / 1000);
            this.end = parseInt((new Date(daterange[1])).valueOf() / 1000) + 86400 - 1;
            this.field.value = `${this.begin}|${this.end}`;
          }
        } else {
          this.field.value = '';
        }
      }
    }
  }
});
</script>
